<template>
  <view>
    <view class="subscribe">
      <template type="text/wxtag-template">
        <view class="subscribe-icon">
          <image class="subscribe-icon-one" src="/static/static/img/finger_00.png"></image>
          <image class="subscribe-icon-two" src="/static/static/img/finger_01.png"></image>
        </view>
        <view class="subscribe-cont">
          <wx-open-subscribe :template="templateIds" id="subscribe-btn" ref="subscribeBtn">
            <script type="text/wxtag-template" slot="style">
              <style>
                .subscribe-btn {
                  color: #fff;
                  background-color: #07c160;
                }
              </style>
            </script>
            <script type="text/wxtag-template">
              <button class="subscribe-btn">
                一次性模版消息订阅              
              </button>
            </script>
          </wx-open-subscribe>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  // #ifdef H5
  import wx from "weixin-js-sdk"
  // #endif
  export default {
    data() {
      return {
        templateIds: [
			'r3ndP4hp5nydwWZN6JpIToHKhSLqJw38bvX-7PnEQ34',
			'euSrQI9z_7YwBCnPQfHuKPJyNAXL56QWdBg8Fvn4Rac',
			'Y8OT2-cfmLmS6k1Q-ee5S04PIebdq7u2mbkdogrsReE'
		] 
      }
    },
    onReady() {
      this.getInfo()
		var btn = this.$refs.subscribeBtn;
	  	btn.addEventListener('success', ({detail}) => {
	  		console.log('success1', detail);	
	  	});
	  	btn.addEventListener('error', ({detail}) => {
	  		console.log('fail1', detail);
	  				
	  	});
    }, 
    methods: {
      getInfo() {
		// #ifdef H5
		let url = window.location.href.split("#")[0]
       this.$http({
       	url:'/api/wechat/share?url='+url,
       	method:'get',
       	success:result=>{
			  console.log(result,'-------------------------分享')
			  let data = result.data.info;
			  let that = this;
			  wx.config({
				debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appId, // 必填，公众号的唯一标识
				timestamp: data.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>
				nonceStr: data.nonceStr, // 必填，生成签名的随机串<?= $data['noncestr']?>
				signature: (data.signature).toLowerCase(), // 必填，签名<?= $data['signature']?>
				jsApiList:[] ,// 这里先声明我们要用到打开地图的JS接口
				openTagList:['wx-open-subscribe']
			  });
			  // config 准备好了那么就开始操作了，
			  wx.ready(() => {
			  // wx-open-subscribe 原生绑定点击事件
				console.log('注册成功')
				
			  })
			}
		})
		// #endif
      }
    }
  }
</script>

<style>
  /* 订阅消息 */
  .subscribe {
    color: #89663f;
    width: 100%;
    padding: 0 100rpx;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 50rpx;
    display: flex;
    /* -webkit-animation: Tada 3s both infinite;
              -moz-animation: Tada 3s both infinite;
              -ms-animation: Tada 3s both infinite;
              animation: Tada 3s both infinite; */
  }

  .subscribe-icon,
  .subscribe-cont {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    position: relative;
  }

  .subscribe-icon {
    width: 150rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    background: linear-gradient(to right, #f3c988, #f9e0b8);
    border-radius: 40rpx 0 0 40rpx;
  }

  .subscribe-icon::after {
    position: absolute;
    content: '';
    right: -50rpx;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 80rpx solid #f9e0b8;
    border-right: 50rpx solid transparent;
    z-index: 9;
  }

  .subscribe-cont {
    width: calc(100% - 150rpx);
    background: linear-gradient(to right, #f3c988, #f9e0b8);
    border-radius: 0 40rpx 40rpx 0;
    font-weight: 600;
  }

  .subscribe-cont text {
    display: inline-block;
    -webkit-animation: subscribeCont 1s linear infinite;
    animation: subscribeCont 1s linear infinite;
  }

  @keyframes subscribeCont {
    25% {
      transform: scale(.98);
    }

    50%,
    100% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.05);
    }
  }

  .subscribe-icon image {
    width: 54rpx;
    height: 54rpx;
    margin-top: 14rpx;
  }

  @keyframes Tada {
    0% {
      transform: scale(1);
      transform: scale(1)
    }

    70%,
    73% {
      transform: scale(1) rotate(-3deg);
      transform: scale(1) rotate(-3deg)
    }

    77%,
    83%,
    90%,
    97% {
      transform: scale(1) rotate(3deg);
      transform: scale(1) rotate(3deg)
    }

    80%,
    87%,
    93% {
      transform: scale(1) rotate(-3deg);
      transform: scale(1) rotate(-3deg)
    }

    100% {
      transform: scale(1) rotate(0);
      transform: scale(1) rotate(0)
    }
  }

  .subscribe-icon-one {
    -webkit-animation: bounce-right 1s linear infinite;
    animation: bounce-right 1s linear infinite;
  }

  @keyframes bounce-right {
    25% {
      transform: translateX(-3px);
    }

    50%,
    100% {
      transform: translateX(0);
    }

    75% {
      transform: translateX(3px);
    }
  }

  .subscribe-icon-two {
    -webkit-animation: bounce-two 1s linear infinite;
    animation: bounce-two 1s linear infinite;
  }

  @keyframes bounce-two {
    25% {
      opacity: 0;
      transform: translateX(-3px);
    }

    75% {
      opacity: 1;
      transform: translateX(3px);
    }
  }

  subscribe-btn {
    width: 100%;
    height: 200rpx;
    text-align: center;
    line-height: 150rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    background-color: green;
    position: relative;
    overflow: hidden;
  }
</style>





